<template>
  <div class="cont">
      <van-image class="img" src="./static/img/c3.gif" />
      <van-cell value="品牌" />
      <van-grid :column-num="3">
          <van-grid-item
              v-for="(value,i) in brand"
              :text="value.pBrand"
              border=false
              :key="i"
          >
            <van-image
              slot='icon'
              width="70"
              height="70"
              :src="value.bImg"
            />
          </van-grid-item>
      </van-grid>


      <van-cell value="分类" />
      <van-grid :column-num="3">
          <van-grid-item
              v-for="(value,i) in type"
              :text="value.pType"
              border=false
              :key="i"
          >
            <van-image
              slot='icon'
              width="70"
              height="70"
              :src="value.cImg"
            />
          </van-grid-item>
      </van-grid>
  </div>
</template>
<script>
  import * as api from '@/yoona/getProList.js';
  export default {
    name:'ClassifyFishon',
    data() {
      return {
        id:'',
        brand:[],
        type:[]
      }
    },
    mounted(){
       this.id = this.$route.query.id;
        api.selClassify({
          pClassify:this.id
        }).then(res=>{
          if(res.status == '200'){
            this.brand = res.data.data.brand;
            this.type = res.data.data.type;
          }else{
          }
        })
    },
    watch:{
      '$route':function(){
        this.id = this.$route.query.id;
        api.selClassify({
          pClassify:this.id
        }).then(res=>{
          if(res.status == '200'){
            this.brand = res.data.data.brand;
            this.type = res.data.data.type;
          }else{
          }
        })
      }
    }

  }
</script>
<style scoped>
  .cont{
    margin-bottom: 60px;
  }
.cont .img{
    width: 235px;
    height: 95px;
    margin-bottom: -8px;
    margin-top: 8px;
}
.tuijian{
    width: 200px;
    margin-left:8px;
    margin-top: -15px;
}
.van-nav-bar__text{
  color:#f00;
}
.remen{
    margin-top: 10px;
    margin-left: -125px;
}
</style>
